<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        var popup = window.open('http://localhost:8080/receiveMessage.html', 'receiveMessage');

        popup.postMessage("消息不能发送，因为origin的限制",
            "http://localhost:5000");

        // 假设当前页面没有改变location，这条语句会成功添加message到发送队列中去（targetOrigin设置对了）
        popup.postMessage("可以成功发送数据", "http://localhost:8080");

        function receiveMessage(event) {
            console.log(event)
            // 我们能相信信息的发送者吗?  (也许这个发送者和我们最初打开的不是同一个页面).
            if (event.origin !== "http://localhost:8080")
                return;
            console.log(event.data)
            // event.source 是我们通过window.open打开的弹出页面 popup
            // event.data 是 popup发送给当前页面的消息 "hi there yourself!  the secret response is: rheeeeet!"
        }
        window.addEventListener("message", receiveMessage, false);
    </script>
</body>

</html>